<!-- banner配置详情 -->
<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :title="'banner配置详情'"
    :body-style="{ paddingBottom: '80px' }"
    :maskClosable="false"
    width="30%" 
    :close="onClose"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="小程序appid">
            {{ vdata.detailData.appId }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="banner图片">
            <a-image :width="100" :src="vdata.detailData.url" />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="banner标题">
            {{ vdata.detailData.swiperName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>

      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="链接类型">
            <span v-if="vdata.detailData.linkType === '0'">不做链接</span>
            <span v-if="vdata.detailData.linkType === '1'">活动详情</span>
            <span v-if="vdata.detailData.linkType ==='2'">本小程序页面</span>
            <span v-if="vdata.detailData.linkType === '3'">外部页面链接</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.linkType === '1'" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="活动id">
            {{ vdata.detailData.content }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.linkType === '2'" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="活小程序路径">
            {{ vdata.detailData.content }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.linkType === '3'" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="网页地址">
            {{ vdata.detailData.content }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="顺序">
            {{ vdata.detailData.sort }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="开始时间">
            {{ vdata.detailData.startTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="结束时间类型">
            {{ vdata.detailData.endType=='0'?'无期限':'定时' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col v-if="vdata.detailData.endType=='1'" :sm="24">
        <a-descriptions>
          <a-descriptions-item label="结束时间">
            {{ vdata.detailData.endTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// import { $bannerInfo } from '@/api/manage'
import { $bannerInfo } from '@/api/proxy/programManage/liteBanner/index'


const vdata: any = reactive({
  lableWidth:'width: 100px;',
  btnLoading: false,
  detailData: {}, // 数据对象
  visible: false, // 是否显示弹层/抽屉
})

// 弹层打开事件
function show(recordId) { 
  vdata.btnLoading = true
    $bannerInfo({bannerId:recordId}).then(response => {
      vdata.detailData=response
    }).finally(() => {
      vdata.btnLoading = false
    })
  vdata.visible = true
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
<style scoped>
</style>
